<template>
    <div class="content">

        <el-tabs type="border-card" v-model="ns" @tab-click="handleNsChange">
            <el-tab-pane v-for="(item, index) in nss" :key="index" :label="item" :name="item" lazy>
                <el-row>
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item label="数据源">
                            <!--数据源-->
                            <el-select v-model="ds" placeholder="请选择数据源" @change="handleDsChange">
                                <el-option v-for="(item,index) in dss" :key="index" :label="item.ds + ' | ' + item.dbName" :value="item.ds" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="名称空间">
                            <el-select v-model="mns" placeholder="Mapper-Namespace" @change="handleMnsChange">
                                <el-option v-for="(item,index) in mnss" :key="index" :label="item" :value="item" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="SQL标识">
                            <el-input v-model="sqlId" placeholder="SQLID"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
                            <el-button type="primary" icon="el-icon-refresh-right" @click="handleClear">重置</el-button>
                            <el-button type="primary" icon="el-icon-circle-plus" @click="addOrUpdateHandle(true,ns, ds, mns)">新增</el-button>
                            <el-button type="danger" icon="el-icon-delete" @click="handleBatchDel()">批量删除</el-button>
                            <el-button type="primary" icon="el-icon-copy-document" @click="clickClone(ns,'SQL')">克隆</el-button>
                        </el-form-item>
                    </el-form>
                </el-row>
                <el-table ref="multipleTable" :data="pageData.list" border fit highlight-current-row :header-row-style="() => { return 'line-height:20px';}"
                    :header-cell-style="{ background: 'rgb(55, 60, 100)',color: '#FFFFFF',textAlign: 'center'}" :cell-style="{ textAlign: 'center' }" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="40"> </el-table-column>
                    <el-table-column prop="ds" label="数据源"></el-table-column>
                    <el-table-column prop="mns" label="名称空间"></el-table-column>
                    <el-table-column prop="sqlId" label="SQL标识"></el-table-column>
                    <el-table-column prop="sqlType" label="SQL类型"></el-table-column>
                    <el-table-column prop="sqlXml" label="SQL语句" :show-overflow-tooltip="true" width="500">
                        <template slot-scope="scope">
                            <xmp align="left" style="background-color : #DCDFE6;font-weight: bold;color: blue;">{{ scope.row.sqlXml }}</xmp>
                        </template>
                    </el-table-column>
                    <el-table-column prop="description" label="描述" width="200"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
                    <el-table-column prop="updateTime" label="更新时间" width="160"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="100">
                        <template slot-scope="scope">
                            <el-dropdown>
                                <span class="el-dropdown-link">
                                    <el-button type="text" icon="el-icon-setting" circle>更多</el-button>
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item>
                                        <el-button type="text" icon="el-icon-delete" @click="handleDel(scope.row.sqlId)" size="small">删除</el-button>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <el-button type="text" icon="el-icon-edit" @click="addOrUpdateHandle(false,scope.row.ns,scope.row.ds,scope.row.mns,scope.row.sqlId)" size="small">编辑</el-button>
                                    </el-dropdown-item>
                                    <el-dropdown-item>
                                        <el-button type="text" icon="el-icon-search" @click="sqlExecHandle(scope.row.ns,scope.row.ds,scope.row.mns,scope.row.sqlId)" size="small">执行</el-button>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageData.currPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageData.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="pageData.totalCount">
                </el-pagination>
            </el-tab-pane>
            <add-or-update v-if="visible" ref="sqlAddOrUpdate" @refreshDataList="refreshDataList"></add-or-update>
            <exec-sql v-if="sqlExecVisible" ref="sqlExec" @refreshDataList="refreshDataList"></exec-sql>
            <clone v-if="cloneOpen" ref="cloneRef" @refreshDataList="refreshDataList"></clone>
        </el-tabs>

    </div>
</template>
<script>
    import { sqlPage, sqlDel } from '../../api/sql'
    import { mapperList } from '../../api/mapper'
    import { nsList } from '../../api/ns'
    import { dsClone, dsList } from '../../api/ds'
    import { nsData, dsCloneData } from '../../mixins/mixin'
    import AddOrUpdate from './AddOrUpdate.vue'
    import ExecSql from './ExecSql.vue'
    import Clone from '../ds/Clone.vue';
    export default {
        mounted() {
            if (this.$route.query) {
                this.ns = this.$route.query.ns ? this.$route.query.ns : 'public'
            }
            this.getNsList()
            this.handleNsChange()
        },
        components: {
            AddOrUpdate,
            ExecSql,
            Clone
        },
        mixins: [nsData, dsCloneData],
        data() {
            return {
                dss: [],
                mns: [],
                loading: false,
                ds: '',
                mns: '',
                sqlId: '',
                sqlExecVisible: false,
                visible: false
            }
        },
        methods: {
            refreshDataList() {
                this.cloneOpen = false
                this.visible = false
                this.sqlExecVisible = false
                this.getPageList();
            },
            sqlExecHandle(ns, ds, mns, sqlId) {
                this.sqlExecVisible = true
                this.$nextTick(() => {
                    this.$refs.sqlExec.init(ns, ds, mns, sqlId)
                })
            },
            // 新增 / 修改
            addOrUpdateHandle(isAdd, ns, ds, mns, sqlId) {
                this.visible = true
                this.$nextTick(() => {
                    console.log('+++++++', this)
                    this.$refs.sqlAddOrUpdate.init(isAdd, ns, ds, mns, sqlId)
                })
            },
            handleNsChange() {
                this.ds = ''
                this.dss = []
                this.handleDsChange()
            },
            handleDsChange() {
                this.mns = ''
                this.mnss = []
                this.getDsList()
            },
            handleMnsChange() {
                this.sqlId = ''
                this.getMnsList()
            },
            handleSelectionChange(selection) {
                this.multipleSelection = selection.map(item => item.sqlId);
                this.multipleCloneInfo = selection.map(item => { return { ds: item.ds, mns: item.mns, sqlId: item.sqlId } });
            },
            handleBatchDel(sqlIds) {
                if (this.multipleSelection.length === 0) {
                    this.$message({
                        type: 'info',
                        message: '请选择需要删除的数据'
                    })
                } else {
                    this.$confirm('确认要删除吗, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        sqlDel(this.ns, this.ds, this.mns, this.multipleSelection).then((res) => {
                            this.$message({ message: '删除成功！', type: 'success' })
                            this.getPageList()
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        })
                    })
                }
            },
            handleClear() {
                this.sqlId = ''
                this.getPageList()
            },
            getDsList() {
                dsList(this.ns).then(res => {
                    this.dss = res.data
                    if (this.ds === null || this.ds === '' || this.ds === undefined) {
                        this.ds = this.dss.length === 0 ? '' : this.dss[0].ds
                    }
                }).then(res => {
                    this.getMnsList()
                }).then(res => {
                    this.getPageList();
                })
            },
            getMnsList() {
                mapperList(this.ns, this.ds).then(res => {
                    this.mnss = res.data
                    if (this.mns === null || this.mns === '' || this.mns === undefined) {
                        this.mns = this.mnss.length === 0 ? '' : this.mnss[0]
                    }
                }).then(res => {
                    this.getPageList()
                })
            },
            getPageList() {
                const params = {
                    ns: this.ns,
                    ds: this.ds,
                    mns: this.mns,
                    sqlId: this.sqlId,
                    page: this.page.page,
                    limit: this.page.limit
                }
                sqlPage(params).then((res) => {
                    this.pageData = res.data
                })
            }
        }
    }
</script>

<style scoped>
.content {
    margin: 20px 0px;
}
.el-table {
    margin: 20px 0px;
}
.el-row {
    margin-bottom: 20px;
    line-height: 10px;
    width: 100%;
}
.selection-button {
    margin-top: 20px;
    left: 0%;
}
</style>
